<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>流程管理</title>
    <link rel="stylesheet" href="../../../static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../../../static/plugin/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="../../../static/css/dj-css.css">
    <link rel="stylesheet" type="text/css" href="../../../page/common/css/oa_system.css">

</head>
<body>
<div id="deptApp">

    <h2>人事审批</h2>
    <div class="main">

        <table class="" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>申请人</th>
                <th>类型</th>
                <th>请假开始时间</th>
                <th>请假结束时间</th>
                <th>请假原因</th>
                <th>任务ID</th>
                <th>任务名称</th>
                <th>流程实例ID</th>
                <th>任务创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="task in depttasklist">
                <td v-text="task.user_id"></td>
                <td v-text="task.leave_type"></td>
                <td v-text="task.start_time"></td>
                <td v-text="task.end_time"></td>
                <td v-text="task.reason"></td>
                <td v-text="task.taskid"></td>
                <td v-text="task.taskname"></td>
                <td v-text="task.process_instance_id"></td>
                <td>{{task.taskcreatetime}}</td>
                <td class="operate">
                    <button @click="dealTask(task.taskid)">处理</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item clearfix footer">
            <div class="fl rowsPerPage ">
                每页显示 <input type="number" v-model="pageChange.rowCount">条，共 <span>{{pageChange.total}}</span>条
            </div>
            <div class="fl turnPage ">
                <span class="firstPage" @click="pageUpOrDown(1)">首页</span>
                <span class="prePage" @click="pageUpOrDown('prev')">上一页</span>
                <span class="selectPage"><input type="text" v-model="pageChange.current" value="1">/ <b>{{pageChange.pageNumber}}</b> </span>
                <span class="nextPage" @click="pageUpOrDown('next')">下一页</span>
                <span class="lastPage" @click="pageUpOrDown(pageChange.pageNumber)">末页</span>
                <span class="goPage" @click="init">确认</span>
            </div>
        </div>
    </div>
    <div class="mask"  v-show="dealResultShowFlag" >

        <div class="dealResult">
            <h6>
                人事审批
                <i @click="dealResultShowFlag = !dealResultShowFlag">×</i>
            </h6>
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">申请人：</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly v-model="dealResult.user_id" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">申请时间：</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly v-model="dealResult.apply_time" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间：</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly v-model="dealResult.start_time" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间：</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly v-model="dealResult.end_time" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">请假类型：</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly v-model="dealResult.leave_type" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">请假原因：</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly v-model="dealResult.reason" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="dj-select dj-select-inline boxStyle">
                        <label style="height:auto;padding:3px 15px;width:110px;">审批意见</label>
                        <div class="dj-select-content" style="width: 196px;">
                            <div class="dj-select-input" flag='true' style="width: 190px;">
                                <span class="dj-selected readOnly" type="text" name="" selectedCode='true' style="height:40px;line-height:40px;width: 190px;" id="deptleaderapprove">同意</span>
                                <i></i>
                            </div>
                            <ul class="dj-select-list" style="width: 190px;">
                                <li code = true >同意</li>
                                <li code = false >拒绝</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn" @click="done(dealResult.taskid)">完成</button>
            </div>
        </div>
        </div>
    </div>
</div>
<script src="../../../static/lib/jquery.min.js"></script>
<script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../../../static/lib/vue.min.js"></script>
<script src="../../../static/lib/x-layui.js"></script>
<script src="../../../static/lib/dj-js.js"></script>
<script>
    /**
     * Created by Been on 2017-09-14.
     */

    var VM = new Vue({
        el: "#deptApp",
        created: function () {
            this.init();
        },
        data: {
            totalNum: "",//总条数
            msgType: [],//消息类型 单选
            deptLists: [],//动态表单
            delMultiFlag: [],
            allChoseFlag: false,
            keyWord: '',
            pageChange: {
                current: 1,//当前页
                rowCount: 5,//每页5行
                total:"",
                pageNumber:""
            },
            depttasklist: [],
            taskId:"",
            dealResultShowFlag: false,
            dealResult: {}
        },
        methods: {
            lay: function () {
                var keyWord = $("#leave_type").attr("selectedCode");
                var _this = this;
                layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function () {

                    var laypage = layui.laypage,//分页
                            layer = layui.layer;//弹出层
                    var num = 5;
                    // 以上模块根据需要引入
                    getPageData(1);
                    /*请求后台数据，分页请求*/

                    function getPageData(curr) {

                        $.ajax({
                            url: "../../../actmodel/list.do?current=" + curr + "&pagesize=" + num + "&category=" + keyWord,
                            dataType: "json",
                            type: "POST",
                            async: false,
                            success: function (res) {
                                console.log(res);
                                if (res.msg == "success") {
                                    var list = res.result.dataList;
                                    _this.deptLists = list;
                                    laypage.pages = res.result.total;
                                    _this.totalNum = res.result.total;


                                    //当只有一页时
                                    if (res.result.total > num) {
                                        $(".pageShowFlag").css({"display": "none"});
                                        $(".pageHideFlag").css({"display": "block"});
                                    } else if (res.result.total > 0) {
                                        $(".pageShowFlag").css({"display": "block"});
                                        $(".pageHideFlag").css({"display": "none"});
                                    } else {
                                        $(".pageShowFlag").css({"display": "none"});
                                        $(".pageHideFlag").css({"display": "none"});
                                        layer.msg("没有查询到数据！", {icon: 1});
                                    }


                                    laypage({
                                        cont: 'pagination', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="pagination"></div>
                                        pages: Math.ceil(res.result.total / num), //通过后台拿到的总页数
                                        curr: curr || 1, //当前页
                                        jump: function (obj, first) { //触发分页后的回调
                                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                                getPageData(obj.curr);

                                            }
                                        }
                                    });
                                } else {
                                    layer.msg("没有查询到数据！", {icon: 1})
                                }
                            },
                            error: function (XMLHttpRequest) {
                                layer.msg("系统错误", {icon: 1});
                            }
                        })
                    }
                });
            },
            getMsgType: function () {
                var _this = this;
                $.ajax({
                    url: "../../../actmodel/processType.do",
                    dataType: "json",
                    type: "POST",
                    async: false,
                    success: function (res) {
                        console.log(res);
                        if (res.msg == "success") {
                            _this.msgType = res.result.categoryList;

                        } else {
                            layer.msg("没有查询到数据！", {icon: 1})
                        }
                    },
                    error: function (XMLHttpRequest) {
                        layer.msg("系统错误", {icon: 1});
                    }
                })
            },
            allChose: function () {
                var _this = this;
                this.allChoseFlag = !this.allChoseFlag;
                this.deptLists.forEach(function (item, index) {
                    if (typeof item.checked == "undefined") {
                        Vue.set(item, "checked", true);
                        _this.delMultiFlag.push(item.id);
                    } else {
                        item.checked = _this.allChoseFlag;
                        _this.delMultiFlag = [];
                    }
                });
            },
            selectSelf: function (item) {
                if (typeof item.checked == "undefined") {
                    Vue.set(item, "checked", true);
                } else {
                    item.checked = !item.checked;
                }
            },
            delMulti: function () {
                var _this = this;
                this.notiveLists.forEach(function (item, index) {
                    _this.delMultiFlag.forEach(function (value, i) {
                        if (item.id == value) {
                            item.id = 0;
                        }
                    });
                });
            },
            addModel: function () {
                admin_add("新建模型", "../../../actmodel/addmodel.do", '800', '600');
            },
            edit: function (item) {
                parent.parent.window.open("../../../act/process-editor/modeler.jsp?modelId=" + item.id, "_blank");
            },
            deploy: function (item) {
                layer.open({
                    content: '确认要部署该模型吗?',
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        $.ajax({
                            url: "../../../actmodel/deploy.do?id=" + item.id,
                            dataType: "json",
                            type: "POST",
                            async: false,
                            success: function (res) {
                                layer.msg(res.result.message, {icon: 1});
                                window.location.href = "../../../actprocess/list.do?category=null&current=1&pagesize=5";
                            },
                            error: function (XMLHttpRequest, data) {
                                console.log(data)
                                layer.msg("系统错误", {icon: 1});
                            }
                        });
                        layer.close(index);//关闭确定弹出框
                        // parent.layer.close(pindex);//关闭新建窗口
//

                    },
                    cancel: function () {
                        //右上角关闭回调

                    }
                });
            },
            export1: function (item) {
                parent.parent.window.open("../../../actmodel/export.do?id=" + item.id, "_blank");
            },
            del: function (item) {
                layer.open({
                    content: '确认要删除该模型吗?',
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        $.ajax({
                            url: "../../../actmodel/delete.do?id=" + item.id,
                            dataType: "json",
                            type: "POST",
                            async: false,
                            success: function (res) {
                                layer.msg(res.result.message, {icon: 1});
                                window.location.href = "/page/activiti/model/model.html";
                            },
                            error: function (XMLHttpRequest) {
                                layer.msg("系统错误", {icon: 1});
                            }
                        });
                        layer.close(index);//关闭确定弹出框
                        // parent.layer.close(pindex);//关闭新建窗口
//

                    },
                    cancel: function () {
                        //右上角关闭回调

                    }
                });
            },
            init:function(){
                var _this = this;
                $.ajax({
                    url: "../../activiti/hrtasklist.do",
                    dataType: "json",
                    type: "POST",
                    async: false,
                    data:_this.pageChange,
                    success: function (data) {
                        if (data) {
                            _this.depttasklist = data.rows;
                            _this.pageChange.total = data.total;
                            _this.pageChange.pageNumber = Math.ceil(_this.pageChange.total/_this.pageChange.rowCount);
                        }
                    },
                    error: function (XMLHttpRequest) {
                        layer.msg("系统错误", {icon: 1});
                    }
                })
            },
            pageUpOrDown:function(type){
                if(isNaN(type)){
                    if(type == "prev"){
                        if(this.pageChange.current > 1){
                            this.pageChange.current--;
                        }
                    }
                    if(type == "next"){
                        if(this.pageChange.current < this.pageChange.pageNumber){
                            this.pageChange.current++;
                        }
                    }
                }else{
                    this.pageChange.current = type;
                }
            },
            dealTask: function (taskId) {
                var _this = this;
                this.taskId = taskId;
                this.dealResultShowFlag = true;
                $.ajax({
                    type: "post",
                    url: "../../activiti/dealtask.do",
                    data: {"taskid": taskId},
                    dataType: "json",
                    success: function (data) {
                        if (data.code === 200) {
                            _this.dealResult = data.result.leave;
                        }
                    }
                });
            },
            done:function(){
                var _this = this;
                layui.use(['layer', "form", 'laydate'], function () {
                    var layer = layui.layer;
                });
                var deptleaderapprove = $("#deptleaderapprove").attr("selectedCode");
                $.ajax({
                    type: "post",
                    url: "../../activiti/task/hrcomplete.do",
                    data:{"hrapprove":deptleaderapprove,"taskid":_this.taskId},
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            layer.msg("同意请假！", {icon: 1});
                            setTimeout(function () {
                                _this.dealResultShowFlag = false;
                                window.location.reload();
                            },100);

                        }

                    }
                });
            }
        },
        filters: {
            formatDate: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                var hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours();
                var minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds();
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;

            },
            typeFormat: function (type) {
                if (type == 1) {
                    return "分类1";
                } else if (type == 2) {
                    return "分类2"
                } else {
                    return type;
                }
            }
        }
    });//vue 实力结束

</script>
</body>
</html>